<template>
  <div class="page">
    <div class="time" @click="jiao = true">时间。。。</div>
    <header @click="jiao = true">
      <div class="back"><back></back></div>
      <div class="en">
        <h4 v-show="stop">订喜宴</h4>
        <h3 v-show="stop2">全部商品</h3>
      </div>
      <div class="sweach"></div>
    </header>
    <main @click="jiao = true">
      <van-swipe :autoplay="3000" lazy-render>
        <van-swipe-item v-for="image in images" :key="image">
          <img class="lb_list" :src="image" />
        </van-swipe-item>
      </van-swipe>
    </main>
    <div class="sti-h" @click="jiao = true"><h3>全部商品</h3></div>
    <div class="wrap">
      <div class="wrap_flexd">
        <van-dropdown-menu>
          <van-dropdown-item v-model="value1" :options="option1" />
          <van-dropdown-item v-model="value2" :options="option2" />
          <van-dropdown-item v-model="value3" :options="option3" />
        </van-dropdown-menu>
      </div>
    </div>

    <div class="inner" @click="jiao = true">
      <!-- 第一个盒子模型。。复制多个 -->
      <div class="inner_list">
        <div class="inner_list_img">
          <img
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/ps60jnmgg1pxi7hn2bzzjvlmg6a3n218unef422d12e-080e-4cf0-9f62-c18816e2b612"
            alt=""
          />
        </div>
        <div class="inner_list_en">
          <p>悦喜爱妃堡宴会中心</p>
          <p>婚礼会所&nbsp;&nbsp;20-60桌</p>
          <p>二七区</p>
          <p>￥ <span>229</span> /桌起</p>
          <p>
            <span>特色</span>
            <span>草坪会所&nbsp;&nbsp;停车方便&nbsp;</span>
          </p>
        </div>
      </div>
      <!-- 2 -->
      <div class="inner_list">
        <div class="inner_list_img">
          <img
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/ps60jnmgg1pxi7hn2bzzjvlmg6a3n218unef422d12e-080e-4cf0-9f62-c18816e2b612"
            alt=""
          />
        </div>
        <div class="inner_list_en">
          <p>悦喜爱妃堡宴会中心</p>
          <p>婚礼会所&nbsp;&nbsp;20-60桌</p>
          <p>二七区</p>
          <p>￥ <span>229</span> /桌起</p>
          <p>
            <span>特色</span>
            <span>草坪会所&nbsp;&nbsp;停车方便&nbsp;</span>
          </p>
        </div>
      </div>
      <!-- 3 -->
      <div class="inner_list">
        <div class="inner_list_img">
          <img
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/ps60jnmgg1pxi7hn2bzzjvlmg6a3n218unef422d12e-080e-4cf0-9f62-c18816e2b612"
            alt=""
          />
        </div>
        <div class="inner_list_en">
          <p>悦喜爱妃堡宴会中心</p>
          <p>婚礼会所&nbsp;&nbsp;20-60桌</p>
          <p>二七区</p>
          <p>￥ <span>229</span> /桌起</p>
          <p>
            <span>特色</span>
            <span>草坪会所&nbsp;&nbsp;停车方便&nbsp;</span>
          </p>
        </div>
      </div>
      <!-- 4 -->
      <div class="inner_list">
        <div class="inner_list_img">
          <img
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/ps60jnmgg1pxi7hn2bzzjvlmg6a3n218unef422d12e-080e-4cf0-9f62-c18816e2b612"
            alt=""
          />
        </div>
        <div class="inner_list_en">
          <p>悦喜爱妃堡宴会中心</p>
          <p>婚礼会所&nbsp;&nbsp;20-60桌</p>
          <p>二七区</p>
          <p>￥ <span>229</span> /桌起</p>
          <p>
            <span>特色</span>
            <span>草坪会所&nbsp;&nbsp;停车方便&nbsp;</span>
          </p>
        </div>
      </div>
      <!-- 5 -->
      <div class="inner_list">
        <div class="inner_list_img">
          <img
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/ps60jnmgg1pxi7hn2bzzjvlmg6a3n218unef422d12e-080e-4cf0-9f62-c18816e2b612"
            alt=""
          />
        </div>
        <div class="inner_list_en">
          <p>悦喜爱妃堡宴会中心</p>
          <p>婚礼会所&nbsp;&nbsp;20-60桌</p>
          <p>二七区</p>
          <p>￥ <span>229</span> /桌起</p>
          <p>
            <span>特色</span>
            <span>草坪会所&nbsp;&nbsp;停车方便&nbsp;</span>
          </p>
        </div>
      </div>
      <!-- 6 -->
      <div class="inner_list">
        <div class="inner_list_img">
          <img
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/ps60jnmgg1pxi7hn2bzzjvlmg6a3n218unef422d12e-080e-4cf0-9f62-c18816e2b612"
            alt=""
          />
        </div>
        <div class="inner_list_en">
          <p>悦喜爱妃堡宴会中心</p>
          <p>婚礼会所&nbsp;&nbsp;20-60桌</p>
          <p>二七区</p>
          <p>￥ <span>229</span> /桌起</p>
          <p>
            <span>特色</span>
            <span>草坪会所&nbsp;&nbsp;停车方便&nbsp;</span>
          </p>
        </div>
      </div>
      <!-- 7 -->
      <div class="inner_list">
        <div class="inner_list_img">
          <img
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/ps60jnmgg1pxi7hn2bzzjvlmg6a3n218unef422d12e-080e-4cf0-9f62-c18816e2b612"
            alt=""
          />
        </div>
        <div class="inner_list_en">
          <p>悦喜爱妃堡宴会中心</p>
          <p>婚礼会所&nbsp;&nbsp;20-60桌</p>
          <p>二七区</p>
          <p>￥ <span>229</span> /桌起</p>
          <p>
            <span>特色</span>
            <span>草坪会所&nbsp;&nbsp;停车方便&nbsp;</span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Swipe, SwipeItem } from "vant";
import { ref } from "vue";
import { Button } from "vant";

export default {
  data() {
    return {
      stop: true,
      stop2: false,
    };
  },

  setup() {
    const images = [
      "https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg",
      "https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg",
    ];

    const value1 = ref(0);
    const value2 = ref("a");
    const value3 = ref("A");
    const option1 = [
      { text: "全部商品", value: 0 },
      { text: "新款商品", value: 1 },
      { text: "活动商品", value: 2 },
    ];
    const option2 = [
      { text: "默认排序", value: "a" },
      { text: "好评排序", value: "b" },
      { text: "销量排序", value: "c" },
    ];
    const option3 = [
      { text: "默认排序", value: "A" },
      { text: "好评排序", value: "B" },
      { text: "销量排序", value: "C" },
    ];
    return { images, value1, value2, value3, option1, option2, option3 };
  },

  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  methods: {
    handleScroll() {
      this.scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      //console.log(this.scrollTop);
      if (this.scrollTop > 190) {
        this.stop = false;
        this.stop2 = true;
        //  console.log("5888");
      } else {
        this.stop = true;
        this.stop2 = false;
      }
    },
  },

  /* watch: {
    scrollTop() {
      if (this.scrollTop > 200) {
        this.stop = !stop;
        this.stop2 = !stop2;
      } else {
        console.log("112122");
      }
    },
  }, */

  //组件销毁
  unmounted() {
    window.removeEventListener("scroll", this.handleScroll);
    console.log("组件销毁", 方法handleScroll失效);
  },
};
</script>
<style scoped lang="scss">
.van-dropdown-menu__title {
  font-size: 0.3rem;
}

* {
  margin: 0;
  padding: 0;
}
html {
  font-size: 13.33vw;
}
.body {
  font-size: 0.3rem;
}
.page {
  width: 7.5rem;
  font-size: 0.3rem;
  font-family: "微软雅黑";

  .time {
    width: 100%;
    height: 0.75rem;
    background-color: red;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
  }

  header {
    width: 100%;
    height: 1rem;
    margin-top: 0.75rem;
    background-color: red;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    padding: 0.25rem 0;
    box-sizing: border-box;

    .back {
      width: 5%;
      height: 0.3rem;
    }
    .en {
      width: 60%;
      height: 0.21rem;
      text-align: center;
      line-height: 0.21rem;
      margin-bottom: 0.1rem;
    }
    .sweach {
      width: 5%;
      height: 0.31rem;
      background-color: black;
    }
  }

  main {
    width: 90%;
    height: 2.8rem;
    margin: 2.2rem auto;
    margin-bottom: 0;
    background-color: aqua;

    .lb_list {
      width: 90%;
      height: 2.8rem;
    }
  }

  .sti-h {
    width: 90%;
    margin: 0.2rem auto;
    margin-bottom: 0;
    h3 {
      text-align: center;
      font-size: 0.22rem;
      color: red;
    }
  }
  .wrap {
    width: 100%;
    height: 0.8rem;
    margin: auto;
    position: sticky;
    top: 1.7rem;
    background-color: white;
    box-shadow: none;
    font-size: 0.3rem;
    .wrap_flexd {
      width: 100%;
      height: 100%;
      margin-top: 0.2rem;
      box-shadow: 0 0 0 0;
      box-shadow: none;
      font-size: 0.3rem;
      .font .van-dropdown-menu__title {
        font-size: 0.3rem;
      }
      #wrap_flexd_vant .van-dropdown-menu__title {
        font-size: 0.3rem;
        .van-dropdown-menu__title {
          font-size: 0.3rem;
        }
      }
    }
  }

  .inner {
    width: 90%;
    margin: 0.7rem auto;

    .inner_list {
      margin-top: 0.4rem;
      width: 100%;
      height: 2.23rem;
    }
    .inner_list_img {
      width: 3rem;
      height: 2.23rem;
      float: left;
    }
    .inner_list_img img {
      width: 100%;
      height: 100%;
    }
    .inner_list_en {
      width: 3rem;
      height: 2.23rem;
      float: left;
      font-size: 0.3rem;
      margin-left: 0.2rem;
      p:first-child {
        font-size: 0.26rem;
      }
      p:nth-of-type(2) {
        color: rgba(153, 153, 153, 1);
        font-size: 0.22rem;
        margin-top: 0.22rem;
      }
      p:nth-of-type(3) {
        color: rgba(153, 153, 153, 1);
        font-size: 0.22rem;
        white-space: nowrap;
        line-height: 0.22rem;
        margin-top: 0.29rem;
      }
      p:nth-of-type(4) {
        color: rgba(216, 65, 65, 1);
        font-size: 0.2rem;
        text-align: right;
        white-space: nowrap;
        line-height: 0.2rem;

        span {
          font-size: 0.4rem;
        }
      }
      p:nth-of-type(5) {
        color: rgba(211, 211, 211, 1);

        text-align: center;
        white-space: nowrap;
        line-height: 0.24rem;
        margin-top: 0.15rem;
        display: flex;
        justify-content: space-between;

        span:first-child {
          font-size: 0.2rem;
          background-color: cornflowerblue;
          padding: 0.08rem 0.1rem;
          border-radius: 0.1rem;
        }
        span:last-child {
          font-size: 0.25rem;
          margin-top: 0.1rem;
        }
      }
    }
  }
}
</style>
